<template>
  <div class="max-w-md mx-auto rounded-xl shadow-md overflow-hidden md:max-w-2xl  dark:bg-gray-800">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:h-full md:w-48" src="./assets/store.png"
             alt="Man looking at item at a store">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case study</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding customers
          for your new business</a>
        <p class="mt-2 text-gray-500">Getting a new business off the ground is a lot of hard work. Here are five ideas
          you can use to find your first customers.</p>
      </div>
    </div>
  </div>

  <input
      class="border border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent">
  <button
      class="bg-purple-600 dark:bg-red-600 rounded hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-opacity-50 ">
    Sign up
  </button>

  <div class="text-5xl font-extrabold">
  <span class="bg-clip-text text-transparent bg-gradient-to-r from-green-400 to-blue-500">
    Hello world
  </span>
  </div>

</template>

<script setup>

</script>
<style></style>
